<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const queryName = ref("")
onMounted(() => {
    const route = useRoute() // 路由信息
    // queryName.value = route.query.name as string
    // query传递参数- 路径?key=value&key1=value
    // params传递参数-路径/:参数名称/:参数名称1/ -> 这个用的略多一些
    queryName.value = route.params.name as string
    alert(route.params.index)

})
const router = useRouter() // 自定义hook的特性 必须在最顶层声明才可以使用
const back = () => {
    // router.back()
    router.go(-1)
}



</script>

<template>
    <div class="search">
        <p>搜索关键字: {{ queryName }}</p>
        <p>搜索结果: </p>
        <ul>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
        </ul>
        <button @click="back">返回</button>
    </div>
</template>

<style>
.search {
    width: 400px;
    height: 240px;
    padding: 0 20px;
    margin: 0 auto;
    border: 2px solid #c4c7ce;
    border-radius: 5px;
}
</style>